import SearchWrapper from '@/components/SearchWrapper';
import { keyboardListener } from '@/pages/Sale/keyboardListener';
import { Chzd, ChzdDetail, ChzdQueryResult } from '@/types/chzd';
import { request } from '@@/exports';
import { PageContainer } from '@ant-design/pro-components';
import { Empty, Table } from 'antd';
import React, { useEffect, useMemo, useState } from 'react';
import styles from './index.module.less';

export default function Page() {
  const [saleList, setSaleList] = useState<Chzd[]>([]);
  const [detailList, setDetailList] = useState<{ [key: string]: ChzdDetail[] }>(
    {},
  );

  // 表格columns
  const columns = [
    {
      title: '商品名称',
      dataIndex: 'spname',
      key: 'spname',
    },
    {
      title: '数量',
      dataIndex: 'sl',
      key: 'sl',
    },
    {
      title: '单价',
      dataIndex: 'jg',
      key: 'jg',
    },
    {
      title: '金额',
      dataIndex: 'je',
      key: 'je',
    },
  ];

  const [activeDh, setActiveDh] = React.useState<string>('');
  const activeSale = useMemo(() => {
    return saleList.find((v) => v.dh === activeDh);
  }, [activeDh]);

  useEffect(() => {
    request<ChzdQueryResult>('/api/chzd/queryRecentZD', {
      method: 'GET',
    }).then((res) => {
      console.log(res);
      setSaleList(res.zd);
      setDetailList(res.zd_detail);
    });

    document.addEventListener('keyup', keyboardListener);

    return () => {
      document.removeEventListener('keyup', keyboardListener);
    };
  }, []);

  return (
    <div className={styles.main}>
      <PageContainer title={'查询出货单'}>
        <SearchWrapper></SearchWrapper>
        <div className={styles.container}>
          <div className={styles['left-side']}>
            {saleList.map((v) => {
              return (
                <div
                  className={`${styles['sale-card']} ${
                    activeDh === v.dh ? styles['active'] : ''
                  }`}
                  onClick={() => setActiveDh(v.dh)}
                  key={v.dh}
                >
                  <div className={styles['line-one']}>
                    <h4>{v.khname}</h4>
                    <p
                      className={styles['total-money']}
                      style={{
                        color: v.fkfs === '欠款' ? '#ce6865' : '#7ec050',
                      }}
                    >
                      ¥ {v.je}
                    </p>
                  </div>
                </div>
              );
            })}
          </div>
          <div className={styles['right-side']}>
            {!activeDh ? (
              <Empty />
            ) : (
              <>
                <h2>{activeSale?.khname}</h2>
                <p>单号：{activeSale?.dh}</p>
                <p>金额：{activeSale?.je}</p>
                <Table
                  columns={columns}
                  dataSource={detailList[activeDh]}
                ></Table>
              </>
            )}
          </div>
        </div>
      </PageContainer>
    </div>
  );
}
